<template>
    <div class="song-list">
        <div class="list-pic">
            <img :src="picUrl + '?param=128y128' " alt="">
        </div>
        <div class="list-name">
            <p>{{name}}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SongList',
    props: ['name','picUrl']
}
</script>

<style lang="scss" scoped>
    .song-list{
        // width: 33.33%;
        width: 100%;
        padding: 10px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        .list-pic{
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
            img{
                width: 100%;
                max-width: 120px;
                height: 100%;
            }
        }
        .list-name{
            p{
                font-size: 12px;
                color: #eeeeee;
                letter-spacing: 0px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;  //需要显示时文本行数
                overflow: hidden;

            }
        }
    }
</style>
